<template>
	<scroll-view scrollX class="nav-wrap">
		<view v-for="(item,index) in hoticon" :key="index" class="nav-wrap-item" @tap="send(item.name)">
			<view class="nav-wrap-item-icon">
				<view :style="{maskImage: `url(${item.iconUrl})`}" class="nav-wrap-item-icon-img"></view>
			</view>
			<view class="nav-wrap-item-title">
				{{ item.name }}
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "Dailyrecommended",
		data() {
			return {

			}
		},
		props: ['hoticon'],
		methods: {
			send(name) {
				if (name == '每日推荐') {
					uni.navigateTo({
						url: '../../subpag/dailyRecommendation/dailyRecommendation'
					})
				}
				console.log(name);
			}
		},
	}
</script>

<style lang="scss">

	.nav-wrap {
		width: 750rpx;
		height: 180rpx;
		white-space: nowrap;
		border-bottom: 1rpx solid #f3f3f3;


		&-item {
			display: inline-block;
			margin-left: 50rpx;

			&:last-child {
				margin-right: 30rpx;
			}

			&-icon {
				width: 95rpx;
				height: 95rpx;
				border-radius: 50%;
				background-color: #fff0f1;
				display: flex;
				justify-content: center;
				align-items: center;

				&-img {
					width: 95rpx;
					height: 95rpx;
					
					// background-color: red;
					background-image: linear-gradient(45deg, #fe393a 70%, #ff8180);
					mask-repeat: no-repeat;
					mask-size: 100%;
					mask-position: 0 0, center;
					display: table;
				}
			}

		}
	}
</style>
